<template>
	<view class="my-lovely">
		<view class="lovely-title">猜你喜欢</view>
		<view class="lovely-list" v-if="liveList && liveList.length > 0">
			<view class="lovely-item" v-for="item in liveList" :key="item.id" @click="goPlay(item)">
				<view class="lovely-image">
					<image :src="item.cover_vertical"></image>
				</view>
				<view class="lovely-name">{{item.name}}</view>
			</view>
		</view>
		<u-empty v-else mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
		</u-empty>
	</view>
</template>

<script>
	export default {
		props:{
			liveList:{
				type:Array,
				default:() => []
			}
		},
		methods: {
			goPlay(item) {
				uni.navigateTo({
					url: `/pages/play/index?drama_id=${1}`
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.my-lovely {
		width: 100%;

		.lovely-title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
		}

		.lovely-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start; /* 从左到右排列 */
			align-items: flex-start;
			gap: 20rpx; /* 使用gap统一间距 */
			margin-top: 20rpx;

			/* 每行三列，左右两列之间各留 20rpx 的间隙，总间隙为 40rpx */
			.lovely-item {
				width: calc((100% - 40rpx) / 3);
				margin-bottom: 24rpx;
				box-sizing: border-box;

				.lovely-image {
					width: 100%;
					height: 220rpx;
					overflow: hidden;
					border-radius: 8rpx;

					image {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}

				.lovely-name {
					margin-top: 12rpx;
					font-size: 26rpx;
					color: #333;
					text-align: center;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}
</style>